<template>
<!-- 订单的充电界面 -->
  <div class="Chargeing" v-if="choose_time">
    <van-nav-bar
        title="充电界面"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <!-- type为0是立即充电模式 -->
    <van-steps :active="active" v-if="!choose_time.type">
        <van-step>
            <div class="content">
                <span>已下单</span>
                <span>{{buyTime}}</span>
            </div>
        </van-step>
        <van-step>
            <div class="content">
                <span>正在充电</span>
                <span>{{buyTime}}</span>
            </div>
        </van-step>
        <van-step>
            <div class="content">
                <span>充电完成</span>
                <span>{{finishTime}}</span>
            </div>
        </van-step>
    </van-steps>
    <!-- type为1是预约模式 -->
    <van-steps :active="active" v-else>
        <van-step>
            <div class="content">
                <span>已下单</span>
                <span>{{buyTime}}</span>
            </div>
        </van-step>
        <van-step>
            <div class="content">
                <span>已预约</span>
                <span>{{buyTime}}</span>
            </div>
        </van-step>
        <van-step>
            <div class="content">
                <span>正在充电</span>
                <span>{{start_time}}</span>
            </div>
        </van-step>
        <van-step>
            <div class="content">
                <span>充电完成</span>
                <span>{{finishTime}}</span>
            </div>
        </van-step>
    </van-steps>
    <div class="dots" v-if="!show">
        <chargeDots :status="status_dot"/>
    </div>
    <van-circle class="circle" :key="key" v-if="all_time" v-model="currentRate" :rate="100" :speed="speed" :text="text" 
        :color="gradientColor" :stroke-width="60" size="150px"/>
    <div class="card">
        <ChargeStationCard 
            :point="this_chargeStation"
            :myposition="myposition"
            :distance="distance"
        />
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import {get_chargeStationby_id,get_orderby_id} from '@/api/index';
import ChargeStationCard from '@/components/ChargeStationCard/ChargeStationCard.vue'
import chargeDots from '@/components/chargeDots/chargeDots.vue'

export default {
  name: 'Chargeing',
  components: {
    ChargeStationCard,
    chargeDots,
  },
  props:[],
  data(){
        return{
            this_chargeStation:null,
            active: 1,
            //circle环的配置
            key: 1,    //用于销毁重创dom节点
            speed: 0,
            currentRate: 0, //当前进度
            all_time: null,   //总时间分钟为单位
            gradientColor: {
                '0%': '#32ff98',
                '100%': '#0ecd6c',
            },
            distance: null,
            myposition: null,
            status_dot: null,  //充电圆点状态
            id: null,
            show: false,
            order: null,
        }
    },
    computed:{
        choose_time(){
            if(this.show){
                return this.order;
            }
            else return this.$store.state.choose_time;
        },
        buyTime(){
            return this.choose_time.buyTime.split(' ')[1]
        },
        finishTime(){
            return this.choose_time.finishTime.split(' ')[1]
        },
        start_time(){
            return this.choose_time.start_time.split(' ')[1]
        },        
        text() {
            //预约模式
            if(this.choose_time.type == 1){
                //第二节点文案
                if(this.active == 1) return '预约时间完成' + this.currentRate.toFixed(0) + '%';
                else return '充电' + this.currentRate.toFixed(0) + '%';
            }
            // 立即充电模式
            else{
                return '充电' + this.currentRate.toFixed(0) + '%';
            }
        },
    },
    async created(){
        this.show = this.$route.query.show;
        if(this.show){
           let res = await get_orderby_id(this.$route.query.order_id)
           this.order = res.data[0]
        }
        this.distance = this.$route.query.distance;
        this.myposition = {lng:this.$route.query.lng, lat:this.$route.query.lat};
        this.id = this.$route.query.charge_id  
       let res = await get_chargeStationby_id(this.id);
       let this_chargeStation = res.data;
        this.this_chargeStation = res.data;
        this.active = 1;
        //两个充电模式的第二节点圆环设计
        if(this.show){
            if(this.order.type == 0){
                let min = moment(this.order.finishTime).diff(moment(this.order.buyTime),'minutes')
                min = min + '分钟'
                this.$set(this.order,"value",[min])
            }
            else{
                let min1 = moment(this.order.start_time).diff(moment(this.order.buyTime),'minutes') + '分钟'
                let min2 = moment(this.order.finishTime).diff(moment(this.order.start_time),'minutes') + '分钟'
                let min = [min1,min2] 
                this.$set(this.order,"value",min)
            }
        }
        let time = this.choose_time.value[0];
        this.circleDesign(time)
        //充电圆点设计
        if(!this.show){
            let charge_station_status = this_chargeStation.charge_station_status.split("");
            charge_station_status = charge_station_status.map( item => Number(item));
            this.status_dot = charge_station_status;
        }
    },
    watch:{
        currentRate(){
            if(this.currentRate == 100){
                //立即充电模式
                //第三节点
                if(this.choose_time.type == 0){
                    this.active = 2; 
                }
                //预约模式
                if(this.choose_time.type == 1){
                    //当前时间
                    let nowTime = moment().format('YYYY-MM-DD HH:mm');
                    let flag = moment(nowTime).isSameOrAfter(this.choose_time.finishTime) //大于充电完成时间
                    // let flag1 = moment(nowTime).isSameOrAfter(this.choose_time.start_time) //大于预约完成时间
                    if(flag){
                        //第四节点
                        this.active = 3;
                    } 
                    else{
                        //第三节点
                        this.active = 2;
                        this.key = 2;
                        let time = this.choose_time.value[1];
                        this.circleDesign(time)
                    } 
                }
            } 
        }
    },
    methods:{
        onClickLeft() {
            this.$router.go(-1);
        },
        circleDesign(time){
            let all_time
            //转换成分钟制
            if(time == '1小时30分钟') all_time = 90;
            else if(time.includes("分钟")) all_time = time.substring(0,(time.indexOf('分')))
            else if(time.includes("小时")){
                all_time = time.substring(0,(time.indexOf('小')))
                all_time = all_time*60
            } 
            this.all_time = all_time
                //当前时间
            let nowTime = moment().format('YYYY-MM-DD HH:mm');
                //计算两个时间段的分钟看当前完成多少
            let currentRate
            if(this.active == 2){
                currentRate = moment(nowTime).diff(moment(this.choose_time.start_time), 'minutes');  //第三节点
            }
            else{
                currentRate = moment(nowTime).diff(moment(this.choose_time.buyTime), 'minutes');  //第二节点
            }
            this.currentRate = currentRate*100/all_time; //转成百分制
            this.speed = 100/(all_time*60);
            console.log("当前进度要到100才结束",this.currentRate);
            console.log("速度speed",this.speed);
        }
        
    }
}
</script>

<style lang="less" scoped>
 .Chargeing{
     text-align: left;
     .card{
        padding: 20px;
        background-color: white;
        border-radius: 10px;
        margin: 20px;
        position: absolute;
        bottom: 0px;
        width: 78.5vw;
     }
     
     .content{
         display: flex;
        flex-direction: column;
        align-items: center;
     }
     .circle{
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
     }
 }
</style>